<template>
  <div>
    <!--头部标题-->
    <div class="push-method-box">
      <div>
        <span :class="pushMethodSum < 1 ? 'span-red' : 'span-black'">推送方式*</span>
        <span>至少选择一个</span>
      </div>
      <Tooltip title="刷新允许推送方式">
        <Icon icon="ic:outline-refresh" size="22" />
      </Tooltip>
    </div>
    <!--选择内容-->
    <div class="push-method-content">
      <Tooltip :title="item.tooltip" v-for="(item, index) in pushSelectList" :key="index">
        <div class="push-item-box">
          <div>
            <Switch
              v-model:checked="item.switchFlag"
              checked-children="√"
              :disabled="item.isShow"
            />
            <span :class="!item.isShow ? '' : 'title-color'">{{ item.title }}</span>
          </div>
          <Icon icon="material-symbols:chevron-right" size="20" v-if="item.icon === true" />
        </div>
      </Tooltip>
    </div>
    <!--稍后安排-->
    <div class="arrange-later">
      <div class="switch-box">
        <Switch v-model:checked="switchFlag" checked-children="√" />
        <span>稍后安排</span>
      </div>
      <div v-show="switchFlag" class="switch-item">
        <div class="calendar-box">
          <DatePicker :value="datePickerValue" />
          <TimePicker :value="timePickerValue" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Icon from '/@/components/Icon';
  import { Switch, Tooltip, TimePicker, DatePicker } from 'ant-design-vue';
  import { pushMethodList, stepModal } from './data/notification.data';
  import { ref, watch } from 'vue';
  import { Dayjs } from 'dayjs';

  let switchFlag = ref<boolean>(false);
  let pushSelectList = ref(pushMethodList);
  const props = defineProps(['deliveryMethods', 'selectMethods']);
  //日历
  let datePickerValue = ref<Dayjs>();
  //时间
  let timePickerValue = ref<Dayjs>();

  // 组件通信 子传父
  const emits = defineEmits(['stepList']);
  //推送方式选择计数
  let pushMethodSum = ref(0);
  //选择内容监听回调
  watch(
    () => [pushSelectList.value],
    (nVal) => {
      let stepItemList = new Array<stepModal>();
      pushMethodSum.value = 0;
      nVal[0].forEach((item) => {
        if (item.switchFlag) {
          let stepItem: stepModal = {
            title: item.title,
          };
          stepItemList.push(stepItem);
          pushMethodSum.value += 1;
        }
      });
      let firstItem: stepModal = {
        title: '组合',
      };
      let endItem: stepModal = {
        title: '检查',
      };
      stepItemList.unshift(firstItem);
      stepItemList.push(endItem);
      emits('stepList', stepItemList);
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    () => props.deliveryMethods,
    (nVal) => {
      nVal.forEach((item) => {
        pushSelectList.value.forEach((PItem, index) => {
          if (PItem.title === item) {
            pushSelectList.value[index].isShow = false;
            pushSelectList.value[index].tooltip = '';
            pushSelectList.value[index].icon = false;
          }
        });
      });
    },
  );
  watch(
    () => props.selectMethods,
    (nVal) => {
      pushSelectList.value.forEach((_item, index) => {
        pushSelectList.value[index].switchFlag = false;
      });
      nVal.forEach((item) => {
        pushSelectList.value.forEach((PItem, index) => {
          if (PItem.title === item) {
            pushSelectList.value[index].switchFlag = true;
          }
        });
      });
    },
    {
      deep: true,
      immediate: true,
    },
  );
</script>

<style lang="less" scoped>
  .push-method-box {
    display: flex;
    div:nth-of-type(1) {
      width: 95%;
      color: #444444;
      span:nth-of-type(2) {
        display: block;
        font-size: 9px;
      }
    }
  }
  .span-red {
    color: red;
  }
  .span-black {
    color: #444444;
  }
  .push-item-box {
    width: 48%;
    border: 1px solid #dddddd;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px 0 10px;
    align-items: center;
    border-radius: 5px;
    margin: 5px;
    color: black;
    span {
      margin-left: 5px;
    }
  }
  .title-color {
    color: #989898;
  }
  .push-method-content {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  .arrange-later {
    border: 1px solid #dddddd;
    padding: 0 10px 0 10px;
    margin: 10px 5px;
    border-radius: 5px;
    .switch-box {
      height: 50px;
      display: flex;
      justify-content: left;
      align-items: center;
      span {
        margin-left: 5px;
      }
    }
  }
  .calendar-box {
    width: 100%;
    display: flex;
    margin: 0 0 20px 45px;
  }
</style>
